// 导入依赖
import '../lib/jquery.js';  // 导入 jQuery 库
import { ajax } from '../utils/ajax.js';  // 导入 ajax 请求函数
import { nameTest, pwdTest } from "../utils/reg.js";  // 导入用户名和密码验证函数

// 等待文档加载完成
$(document).ready(function() {
  $('.error').hide(); // 隐藏所有错误提示信息

  // 表单提交事件处理
  $('form').submit(async function(event) {
    event.preventDefault(); // 阻止表单默认提交行为

    // 获取用户名和密码输入框的值并去除两端空白
    var username = $('.username').val().trim();
    var password = $('.password').val().trim();

    // 表单验证
    if (username === '' || password === '') {
      showAlert('表单不能为空');
      return;
    }

    if (!nameTest(username)) {
      showAlert('用户名格式错误');
      return;
    }

    if (!pwdTest(password)) {
      showAlert('密码格式错误');
      return;
    }

    try {
      // 发送登录请求
      let { data: { code, message, token, user } } = await ajax.post('/users/login', { username, password });

      if (code !== 1) {
        // 处理登录失败的情况
        if (message === '用户名或密码错误') {
          showErrorAlert('用户名或密码错误');
        } else {
          showErrorAlert(message);
        }
        return;
      }

      // 登录成功，保存 token 和用户 id 到 localStorage
      localStorage.setItem('token', token);
      localStorage.setItem('uid', user.id);

      // 登录成功，跳转到主页
      location.href = './index.html';
    } catch (error) {
      // 处理登录过程中的异常情况
      console.error('登录失败:', error);
      showErrorAlert('登录失败，请稍后再试。');
    }
  });

  // 显示普通提示信息的函数
  function showAlert(message) {
    var alertDiv = $('<div></div>')  // 创建一个 div 元素
      .text(message)  // 设置 div 内容为提示信息
      .css({  // 设置 div 样式
        'position': 'fixed',
        'top': '50%',
        'left': '50%',
        'transform': 'translate(-50%, -50%)',
        'background-color': 'rgba(0, 0, 0, 0.6)', // 半透明黑色背景
        'color': 'white',
        'padding': '10px 20px',
        'border-radius': '5px',
        'z-index': '1000',
        'text-align': 'center',
        'font-size': '16px'
      })
      .appendTo('body');  // 添加到 body 元素中

    // 2秒后淡出消失
    setTimeout(function() {
      alertDiv.fadeOut(500, function() {
        $(this).remove();
      });
    }, 2000);
  }

  // 显示错误提示信息的函数
  function showErrorAlert(message) {
    var errorDiv = $('<div></div>')  // 创建一个 div 元素
      .text(message)  // 设置 div 内容为错误信息
      .css({  // 设置 div 样式
        'position': 'fixed',
        'top': '50%',
        'left': '50%',
        'transform': 'translate(-50%, -50%)',
        'background-color': 'rgba(0, 0, 0, 0.6)', // 半透明黑色背景
        'color': 'white',
        'padding': '10px 20px',
        'border-radius': '5px',
        'z-index': '1000',
        'text-align': 'center',
        'font-size': '16px'
      })
      .appendTo('body');  // 添加到 body 元素中

    // 2秒后淡出消失
    setTimeout(function() {
      errorDiv.fadeOut(500, function() {
        $(this).remove();
      });
    }, 2000);
  }
});
